<template>
  <div>
    <el-row>
      <el-button @click="getKeywords({page: page})" type="primary" round>刷新</el-button>
      <router-link :to="{path:'/keywords/form',query: {type: 0}}">
        <el-button type="primary" round>添加</el-button>
      </router-link>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed v-if="false" prop="id" label="id"></el-table-column>
      <el-table-column fixed prop="keyName" label="keyName" width="150"></el-table-column>
      <el-table-column fixed v-if="false" prop="parent_id" label="parent_id"></el-table-column>
      <el-table-column fixed prop="parent" label="parent" width="150"></el-table-column>
      <el-table-column fixed label="操作" width="100">
        <template slot-scope="scope">
          <router-link
            :to="{path:'/keywords/form',query: { id: scope.row.id, keyName: scope.row.keyName, parent: scope.row.parent, parent_id: scope.row.parent_id, type: 1}}"
          >
            <el-button type="text" size="small">修改</el-button>
          </router-link>

          <el-button @click="deleteKeywords(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <the-pagination
      :total="total"
      v-on:getCurrentData="getCurrentData"
      v-on:getSizeData="getSizeData"
    ></the-pagination>
  </div>
</template>

<script>
import { requestKeywordsGet } from "../api/index.js";
import { requestKeywordsDelete } from "../api/index.js";

export default {
  name: "keywords",
  components: {
    "the-pagination": () => import("../components/pagination")
  },
  methods: {
    getKeywords(val) {
      requestKeywordsGet(val).then(data => {
        this.tableData = data.result.data;
        this.total = data.result.totalElements;
      });
    },
    deleteKeywords(val) {
      requestKeywordsDelete({ id: val }).then(data => {
        this.$message({
            message: data.message,
            type: data.code == "SUCCESS" ? "success":"error" 
          });
          this.getKeywords({page: this.page});
      });
    },
    getCurrentData: function(val) {
      this.page = val;
      this.getKeywords({page: this.page, maxEle: this.maxEle})
    },
    getSizeData: function(val) {
      this.maxEle = val;
      this.getKeywords({page: this.page, maxEle: this.maxEle})
    }
  },
  data() {
    let tableData = [];
    let total = 0;
    let page = 0;
    let maxEle = null;
    requestKeywordsGet({ page: page, maxEle: maxEle }).then(data => {
      this.tableData = data.result.data;
      this.total = data.result.totalElements;
    });

    return {
      labelPosition: "right",
      tableData: tableData,
      total: total,
      page: page,
      maxEle: maxEle
    };
  }
};
</script>